<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>IT教育网2015课程学习情况</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #000;
            font-size: 12px;
        }

        .iphone{
            width: 340px;
            height: 540px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -270px 0 0 -170px;
        }
    </style>

    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">

    <!-- 引入柱图的资源 -->
    <script type="text/javascript" src="../js/H5ComponentBar.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBar.css">

    <body>
        <!-- 用于开发测试 H5ComponentBar 对象（柱图组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">
            var cfg = {
                type : "bar",
                text : "",
                width: 530,
                height: 600,
                data:[
                    ['js', .4 ,'#ff7676'],
                    ['html/css', .2 ,'yellow'],
                    ['h5', .1 ,'red'],
                    ['css3', .2 ,'red'],
                    ['h5', .35 ,'red'],
                    ['h5', .05 ,'red'],
                    ['h5', .09 ,'red']
                ],
                css: {
                    top: 100,
                    opacity: 0
                },
                animateIn:{
                    opacity: 1,
                    top: 200
                },
                animateOut:{
                    opacity: 0,
                    top: 100
                },
                center: true
            }

            var h5 = new H5ComponentBar('myBarComponent', cfg);
            $('.iphone').append(h5);

            var leave = true;
            $('body').click(function(){
                leave =! leave;
                $('.h5_component').trigger( leave ? 'onLeave': 'onLoad');
            });

        </script>

    </body>

</html>